<template>
  <div v-if="list" style="padding: 20px 30px 0;min-height: calc(100vh - 50px);background-color: rgb(240, 242, 245);">
    <el-row :gutter="30" class="panel-group">
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel">
          <div class="card-panel-description">
            <div class="card-panel-text">
              会员数
            </div>
            <div style="text-align: center;margin-top: 40px;">
              <count-to :start-val="0" :end-val="list.user_num" :duration="2000" class="card-panel-num" />
            </div>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel">
          <div class="card-panel-description">
            <div class="card-panel-text">
              认证会员数
            </div>
            <div style="text-align: center;margin-top: 40px;">
              <count-to :start-val="0" :end-val="list.authentication_user_num" :duration="2000" class="card-panel-num" />
            </div>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel">
          <div class="card-panel-description">
            <div class="card-panel-text">
              成交会员数
            </div>
            <div style="text-align: center;margin-top: 40px;">
              <count-to :start-val="0" :end-val="list.knockdown_user_num" :duration="2000" class="card-panel-num" />
            </div>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel">
          <div class="card-panel-description">
            <div class="card-panel-text">
              累计成交订单量
            </div>
            <div style="text-align: center;margin-top: 40px;">
              <count-to :start-val="0" :end-val="list.knockdown_order_num" :duration="2000" class="card-panel-num" />
            </div>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel">
          <div class="card-panel-description">
            <div class="card-panel-text">
              平台佣金收入
            </div>
            <div style="text-align: center;margin-top: 40px;">
              <count-to :start-val="0" :end-val="list.commission_income" :duration="2000" class="card-panel-num" />
            </div>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel">
          <div class="card-panel-description">
            <div class="card-panel-text">
              待付商家金额
            </div>
            <div style="text-align: center;margin-top: 40px;">
              <count-to :start-val="0" :end-val="list.load_pay_money" :duration="2000" class="card-panel-num" />
            </div>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel">
          <div class="card-panel-description">
            <div class="card-panel-text">
              商家累计提现
            </div>
            <div style="text-align: center;margin-top: 40px;">
              <count-to :start-val="0" :end-val="list.total_deposit" :duration="2000" class="card-panel-num" />
            </div>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel">
          <div class="card-panel-description">
            <div class="card-panel-text">
              佣金类型提现
            </div>
            <div style="text-align: center;margin-top: 40px;">
              <count-to :start-val="0" :end-val="list.commission_apply" :duration="2000" class="card-panel-num" />
            </div>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel" style="text-align: center;height: 208px;">
          <div class="card-panel-description">
            <div style="margin-top: 70px;">
              <count-to :start-val="0" :end-val="list.commission_apply_num" :duration="2000" class="card-panel-num" />
            </div>
            <div class="card-panel-text" style="margin-top: 15px;">
              佣金提现申请
            </div>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel" style="text-align: center;height: 208px;">
          <div class="card-panel-description">
            <div style="margin-top: 70px;">
              <count-to :start-val="0" :end-val="list.balance_apply_num" :duration="2000" class="card-panel-num" />
            </div>
            <div class="card-panel-text" style="margin-top: 15px;">
              余额提现申请
            </div>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel" style="text-align: center;height: 208px;">
          <div class="card-panel-description">
            <div style="margin-top: 70px;">
              <count-to :start-val="0" :end-val="list.distribution_apply_num" :duration="2000" class="card-panel-num" />
            </div>
            <div class="card-panel-text" style="margin-top: 15px;">
              分销小店提现申请
            </div>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel" style="text-align: center;height: 208px;">
          <div class="card-panel-description">
            <div style="margin-top: 70px;">
              <count-to :start-val="0" :end-val="list.shopping_apply_num" :duration="2000" class="card-panel-num" />
            </div>
            <div class="card-panel-text" style="margin-top: 15px;">
              企业商户提现申请
            </div>
          </div>
        </div>
      </el-col>

      <el-col :xs="12" :sm="12" :lg="12" class="card-panel-col">
        <div class="card-panel" style="text-align: center;height: 208px;">
          <div class="card-panel-description">
            <div style="margin-top: 70px;">
              <count-to :start-val="0" :end-val="list.upbeat_num" :duration="2000" class="card-panel-num" />
            </div>
            <div class="card-panel-text" style="margin-top: 15px;">
              上拍申请
            </div>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="12" class="card-panel-col">
        <div class="card-panel" style="text-align: center;height: 208px;">
          <div class="card-panel-description">
            <div style="margin-top: 70px;">
              <count-to :start-val="0" :end-val="list.up_fight" :duration="2000" class="card-panel-num" />
            </div>
            <div class="card-panel-text" style="margin-top: 15px;">
              上架申请
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import CountTo from 'vue-count-to'
import { getHome } from '@/api/common.js'

export default {
  name: 'HomeIndex',
  components: {
    CountTo
  },
  data() {
    return {
      list: undefined
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      getHome().then((res) => {
        this.list = res.data
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .panel-group {
    margin-top: 18px;

    .card-panel-col {
      margin-bottom: 32px;
    }

    .card-panel {
      height: 158px;
      cursor: pointer;
      font-size: 12px;
      position: relative;
      overflow: hidden;
      color: #666;
      background: #fff;
      box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
      border-color: rgba(0, 0, 0, 0.05);

      .card-panel-icon {
        float: left;
        font-size: 48px;
      }

      .card-panel-description {
        font-weight: bold;
        margin: 26px;

        .card-panel-text {
          line-height: 18px;
          color: rgba(0, 0, 0, 0.45);
          font-size: 16px;
          margin-bottom: 12px;
        }

        .card-panel-num {
          font-size: 20px;
        }
      }
    }
  }

  @media (max-width: 550px) {
    .card-panel-description {
      display: none;
    }
  }
</style>
